<template>
  <div>
    <div class="qaq" style="width:1000px;margin:20px auto;">
         <p style="font-size:18px">问题描述 :  <span>我碰到了问题,我碰到了问题,我碰到了问题,我碰到了问题</span></p>
        <div class="qphoto" style="margin-top:30px;">
            <span style="font-size:18px;display:inline-block;margin-bottom:20px;">问题图片:</span>
            <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </div>
        <p style="font-size:18px;margin-top:30px;">用户回答 :</p>
        <el-table
            :data="tableData"
            border
            style="width: 100%;margin-top:20px;">
            <el-table-column
            prop="asker"
            label="用户"
            width="180">
            </el-table-column>
            <el-table-column
            prop="question"
            label="回答内容"
            width="180">
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.row)"
                type="text"
                size="small">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button style="background:lightblue;margin-top:50px;" @click="qback">返回列表</el-button>

         <!-- 删除弹出框 -->
          <el-popover
              placement="left-start"
              offset="200"
              width="200"
              v-model="visible">
              <p>这是一段内容确定删除吗？</p>
              <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="cancel">取消</el-button>
                  <el-button type="primary" size="mini" @click="sure">确定</el-button>
              </div>
          </el-popover>
    </div>
    
  </div>
</template>

<script>
import {getXmedicineList,medicineXdelList} from '../../../api'
export default {
    data() {
      return {
        // 图片上传
        dialogImageUrl: '',
        dialogVisible: false,
        tableData: [],
        // 弹出框
        visible: false,
        row2:"",
      };
    },
    created() {
      getXmedicineList().then(res => {
        console.log(res)
        this.tableData = res.data
        this.array = res.data
      })
    },
    methods: {
      // 封装
      quedetail() {
        getXmedicineList().then(res => {
          // console.log(res)
          this.tableData = res.data
          this.array = res.data
        })
      },
      // 删除
      deleteRow(row) {
          this.visible = true
          this.row2 = row      
        },
      sure() {
        medicineXdelList(this.row2).then(res => {
              this.quedetail()
        })
        this.visible = false
      },
        // 图片上传
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        qback() {
            this.$router.push('/Questions')
        },
        // 删除提示
        cancel() {
          this.visible = false
        }
    }
}
</script>

<style>

</style>